import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import NewsDetailUseQuery from '@/components/NewsDetailUseQuery.vue'
import NewsDetailUseParams from '@/components/NewsDetailUseParams.vue'
import NewsDetailUseProps from '@/components/NewsDetailUseProps.vue'
import About from '@/pages/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      name: 'homeName',
      path: '/home',
      component: Home
    },
    {
      name: 'newsName',
      path: '/news',
      component: News,
      children: [
        // 一、query传参
        // {
        //   name: 'detailName',
        //   path: 'detail',
        //   component: NewsDetailUseQuery          
        // },
        // 二、params传参
        // {
        //   name: 'detailName',
        //   path: 'detail/:id/:title:/:content',
        //   component: NewsDetailUseParams
        // },
        // 三、props传参
        {
          name: 'detailName',
          path: 'detail/:id/:title:/:content',
          component: NewsDetailUseProps,
          // 1、将路由收到的所有params参数作为props传给路由组件
          props: true,
          // 2、自定义props
          // props(route) {
          //   return {
          //     // 取query
          //     id: route.query.id,
          //     title: route.query.title,
          //     content: route.query.content,
          //     // 或者params
          //     // id: route.params.id,
          //     // title: route.params.title,
          //     // content: route.params.content,
          //   }
          // }
          // 3、对象写法，写死给路由组件的参数
          // props: {
          //   a: 100,
          //   b: 200,
          //   c: 300,
          // }
        },
      ]
    },
    {
      name: 'aboutName',
      path: '/about',
      component: About
    },
    {
      path: '/',
      redirect: '/home'
    }
  ]
})

export default router